import {designPage, reactive, useRefs} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Button, Checkbox, CheckboxGroup, Form, FormItem, Input, InputNumber, Radio, RadioGroup, Segmented, Select, SelectOption} from "../../../../packages";
import {Tooltip} from "../../../../packages/components/Tooltip";
import './DemoFormLayout.scss';
import QuestionCircleOutlined from "@ant-design/icons/QuestionCircleOutlined";

export const demo1 = designPage(() => {

  const { refs, onRef } = useRefs({ form: Form });

  const state = reactive({
    formData: {} as any,
    align: 'left',
  });

  const { formData } = state;

  const levelData = [
    { levelName: '一级', code: '1' },
    { levelName: '二级', code: '2' },
    { levelName: '三级', code: '3' },
  ];

  const options: any[] = [
    { label: 'Left', value: 'left' },
    { label: 'Center', value: 'center' },
    { label: 'Right', value: 'right' },
  ];

  return () => (
    <DemoRow title={'单列表单'}>
      <Form column={1} modelValue={state.formData} labelAlign={state.align as any} ref={onRef.form}>
        <FormItem label="文本对其方式">
          <Segmented options={options} v-model={state.align}/>
        </FormItem>
        <FormItem label={'客户名称'} field={'name'} required>
          <Input v-model={formData.name}/>
        </FormItem>
        <FormItem label={'客户员工数量'} field={'type'} required>
          {{
            default: () => <InputNumber v-model={formData.type}/>,
            append: () => <Tooltip message="整数"><QuestionCircleOutlined/></Tooltip>
          }}
        </FormItem>
        <FormItem label={'客户加入时间'} field={'joinTime'}>
          <div style={{ display: 'flex' }}>
            <div style={{ flex: 1, overflow: 'hidden' }}>
              <Input v-model={formData.joinTime}/>
            </div>
            <div>&nbsp;至&nbsp;</div>
            <div style={{ flex: 1, overflow: 'hidden' }}>
              <Input v-model={formData.name}/>
            </div>
          </div>
        </FormItem>
        <FormItem label={'是否老客户'} field={'oldFlag'}>
          <RadioGroup itemWidth="50%" v-model={formData.oldFlag}>
            <Radio label={'老客户'} value={'Y'}/>
            <Radio label={'非老客户'} value={'N'}/>
          </RadioGroup>
        </FormItem>
        <FormItem label={'客户性质'} field={'properties'}>
          <CheckboxGroup itemWidth="50%" v-model={formData.properties}>
            <Checkbox label={'大客户'} value={'large'}/>
            <Checkbox label={'潜在客户'} value={'potential'}/>
            <Checkbox label={'长久客户'} value={'long'}/>
            <Checkbox label={'赢单客户'} value={'order'}/>
          </CheckboxGroup>
        </FormItem>
        <FormItem label={'客户级别'} field={'level'}>
          <Select v-model={formData.level}>
            {levelData.map(item => <SelectOption children={item.levelName} value={item.code} key={item.code}/>)}
          </Select>
        </FormItem>
        <FormItem label={'备注'} field={'comments'}>
          <Input textarea v-model={formData.comments}/>
        </FormItem>
        <FormItem colon={false} contentAlign={'center'}>
          <Button label={'取消'} style={{ marginRight: '4px' }}/>
          <Button type="primary" label={'提交'} onClick={() => refs.form?.validate()}/>
        </FormItem>
      </Form>
    </DemoRow>
  );
});


export const demo2 = designPage(() => {

  const { refs, onRef } = useRefs({ form: Form });

  const state = reactive({
    formData: {} as any,
    align: 'left' as any
  });

  const { formData } = state;

  const levelData = [
    { levelName: '一级', code: '1' },
    { levelName: '二级', code: '2' },
    { levelName: '三级', code: '3' },
  ];

  const options: any[] = [
    { label: '左对齐', value: 'left' },
    { label: '居中对其', value: 'center' },
    { label: '右对齐', value: 'right' },
  ];

  return () => (
    <DemoRow title={'单列居中表单(label不占用宽度)'}>
      <div>
        <Form column={1} modelValue={state.formData} singleColumnCenter labelAlign={state.align} ref={onRef.form}>
          <FormItem label="文本对其方式">
            <Segmented v-model={state.align} options={options}/>
          </FormItem>
          <FormItem label={'客户名称'} field={'name'} required>
            <Input v-model={formData.name}/>
          </FormItem>
          <FormItem label={'客户员工数量'} field={'type'} required>
            {{
              default: () => <InputNumber v-model={formData.type}/>,
              append: () => <Tooltip message="整数"><QuestionCircleOutlined/></Tooltip>
            }}
          </FormItem>
          <FormItem label={'客户加入时间'} field={'joinTime'}>
            <div style={{ display: 'flex' }}>
              <div style={{ flex: 1, overflow: 'hidden' }}>
                <Input v-model={formData.joinTime}/>
              </div>
              <div>&nbsp;至&nbsp;</div>
              <div style={{ flex: 1, overflow: 'hidden' }}>
                <Input v-model={formData.name}/>
              </div>
            </div>
          </FormItem>
          <FormItem label={'是否老客户'} field={'oldFlag'}>
            <RadioGroup itemWidth="50%" v-model={formData.oldFlag}>
              <Radio label={'老客户'} value={'Y'}/>
              <Radio label={'非老客户'} value={'N'}/>
            </RadioGroup>
          </FormItem>
          <FormItem label={'客户性质'} field={'properties'}>
            <CheckboxGroup itemWidth="50%" v-model={formData.properties}>
              <Checkbox label={'大客户'} value={'large'}/>
              <Checkbox label={'潜在客户'} value={'potential'}/>
              <Checkbox label={'长久客户'} value={'long'}/>
              <Checkbox label={'赢单客户'} value={'order'}/>
            </CheckboxGroup>
          </FormItem>
          <FormItem label={'客户级别'} field={'level'}>
            <Select v-model={formData.level}>
              {levelData.map(item => <SelectOption children={item.levelName} value={item.code} key={item.code}/>)}
            </Select>
          </FormItem>
          <FormItem label={'备注'} field={'comments'}>
            <Input textarea v-model={formData.comments}/>
          </FormItem>
          <FormItem colon={false} contentAlign={'center'}>
            <Button label={'取消'} style={{ marginRight: '4px' }}/>
            <Button type="primary" label={'提交'} onClick={() => refs.form?.validate()}/>
          </FormItem>
        </Form>
      </div>
    </DemoRow>
  );
});


export const demo3 = designPage(() => {
  const state = reactive({
    formData: {} as any,
    align: 'left' as any
  });

  const { formData } = state;

  const levelData = [
    { levelName: '一级', code: '1' },
    { levelName: '二级', code: '2' },
    { levelName: '三级', code: '3' },
  ];

  const options: any[] = [
    { label: '左对齐', value: 'left' },
    { label: '居中对其', value: 'center' },
    { label: '右对齐', value: 'right' },
  ];

  return () => (
    <DemoRow title={'双列表单'}>
      <div>
        <Form column={2} modelValue={state.formData} labelAlign={state.align}>
          <FormItem label="文本对其方式">
            <Segmented v-model={state.align} options={options}/>
          </FormItem>
          <FormItem label={'客户名称'} field={'name'} required>
            <Input v-model={formData.name}/>
          </FormItem>
          <FormItem label={'客户员工数量'} field={'type'} required>
            {{
              default: () => <InputNumber v-model={formData.type}/>,
              append: () => <Tooltip message="整数"><QuestionCircleOutlined/></Tooltip>
            }}
          </FormItem>
          <FormItem label={'客户加入时间'} field={'joinTime'}>
            <div style={{ display: 'flex' }}>
              <div style={{ flex: 1, overflow: 'hidden' }}>
                <Input v-model={formData.joinTime}/>
              </div>
              <div>&nbsp;至&nbsp;</div>
              <div style={{ flex: 1, overflow: 'hidden' }}>
                <Input v-model={formData.name}/>
              </div>
            </div>
          </FormItem>
          <FormItem label={'是否老客户'} field={'oldFlag'}>
            <RadioGroup itemWidth="50%" v-model={formData.oldFlag}>
              <Radio label={'老客户'} value={'Y'}/>
              <Radio label={'非老客户'} value={'N'}/>
            </RadioGroup>
          </FormItem>
          <FormItem label={'客户性质'} field={'properties'}>
            <CheckboxGroup itemWidth="50%" v-model={formData.properties}>
              <Checkbox label={'大客户'} value={'large'}/>
              <Checkbox label={'潜在客户'} value={'potential'}/>
              <Checkbox label={'长久客户'} value={'long'}/>
              <Checkbox label={'赢单客户'} value={'order'}/>
            </CheckboxGroup>
          </FormItem>
          <FormItem label={'客户级别'} field={'level'}>
            <Select v-model={formData.level}>
              {levelData.map(item => <SelectOption children={item.levelName} value={item.code} key={item.code}/>)}
            </Select>
          </FormItem>
          <FormItem label={'备注'} field={'comments'} block>
            <Input textarea v-model={formData.comments}/>
          </FormItem>
          <FormItem colon={false} contentAlign={'center'} block>
            <Button label={'取消'} style={{ marginRight: '4px' }}/>
            <Button type="primary" label={'提交'}/>
          </FormItem>
        </Form>
      </div>
    </DemoRow>
  );
});


export const demo4 = designPage(() => {
  const state = reactive({
    formData: {} as any,
  });

  const { formData } = state;

  const levelData = [
    { levelName: '一级', code: '1' },
    { levelName: '二级', code: '2' },
    { levelName: '三级', code: '3' },
  ];

  return () => (
    <DemoRow title={'三列表单'}>
      <div>
        <Form column={3} modelValue={state.formData}>
          <FormItem label={'客户名称'} field={'name'} required>
            <Input v-model={formData.name}/>
          </FormItem>
          <FormItem label={'客户员工数量'} field={'type'} required>
            {{
              default: () => <InputNumber v-model={formData.type}/>,
              append: () => <Tooltip message="整数"><QuestionCircleOutlined/></Tooltip>
            }}
          </FormItem>
          <FormItem label={'客户加入时间'} field={'joinTime'}>
            <div style={{ display: 'flex' }}>
              <div style={{ flex: 1, overflow: 'hidden' }}>
                <Input v-model={formData.joinTime}/>
              </div>
              <div>&nbsp;至&nbsp;</div>
              <div style={{ flex: 1, overflow: 'hidden' }}>
                <Input v-model={formData.name}/>
              </div>
            </div>
          </FormItem>
          <FormItem label={'是否老客户'} field={'oldFlag'}>
            <RadioGroup itemWidth="50%" v-model={formData.oldFlag}>
              <Radio label={'老客户'} value={'Y'}/>
              <Radio label={'非老客户'} value={'N'}/>
            </RadioGroup>
          </FormItem>
          <FormItem label={'客户性质'} field={'properties'}>
            <CheckboxGroup itemWidth="50%" v-model={formData.properties}>
              <Checkbox label={'大客户'} value={'large'}/>
              <Checkbox label={'潜在客户'} value={'potential'}/>
              <Checkbox label={'长久客户'} value={'long'}/>
              <Checkbox label={'赢单客户'} value={'order'}/>
            </CheckboxGroup>
          </FormItem>
          <FormItem label={'客户级别'} field={'level'}>
            <Select v-model={formData.level}>
              {levelData.map(item => <SelectOption children={item.levelName} value={item.code} key={item.code}/>)}
            </Select>
          </FormItem>
          <FormItem label={'备注'} field={'comments'} block>
            <Input textarea v-model={formData.comments}/>
          </FormItem>
          <FormItem colon={false} contentAlign={'center'} block>
            <Button label={'取消'} style={{ marginRight: '4px' }}/>
            <Button type="primary" label={'提交'}/>
          </FormItem>
        </Form>
      </div>
    </DemoRow>
  );
});
